<template>
  <div class="verification Modifypassword">
    <!-- 页头组件 -->
    <div class="verificationHead">
    <span class="next" >
        <el-button class="elbutton" type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </span>
    <el-page-header @back="goBack" content="修改密码" title="" id="ico"></el-page-header>
    </div>
    <div class="verificationForm">
     <div class="myaccountfrom">
    <div class="passwordcommit">密码强度要求：密码长度8-12位，且至少包含数字，大小写字母及特殊符号中的任意三种</div>
        <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

     <el-form-item  label="旧密码:" prop="oldpass">
    <el-input  type="password" placeholder="请输入" v-model.number="ruleForm.oldpass"></el-input>
  </el-form-item>

    <el-form-item label="密码:" prop="pass">
    <el-input type="password" placeholder="请输入" v-model="ruleForm.pass" autocomplete="off"></el-input>
     </el-form-item>
    <el-form-item label="确认密码:" prop="checkPass">
    <el-input type="password" placeholder="请输入" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
        
    </div>  
    </div>

  </div>
</template>
<script>
export default {
    components:{
    },
    data() {
      let imitatepassword=localStorage.getItem("imitatepassword")
       var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入框不能为空!'));
        } else if(imitatepassword==value){
          callback()
        }else if(imitatepassword!==value){
          return callback(new Error('输入旧密码有误!'));
        }
      };

        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码!'));
        }else if(this.ruleForm.pass == null){
           callback(new Error('输入框不能为空!'));
        } else {
            this.$refs.ruleForm.validateField('checkPass');
          callback();
        }
      };

      var validatePass2 = (rule, value, callback) => {
        if (this.ruleForm.checkPass == null) {
          callback(new Error('请再次输入密码!'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码必须一致!'));
        } else {
          if (this.ruleForm.oldpass!==null) {
             callback();
          }
          callback(new Error('旧密码不能为空!'));
        }
      };
        return {
            Promptforsuccess:"true",//当密码修改成功时存储 我的账户用于判断是否显示修改成功提示信息
            rules:null,
            ruleForm:{
                 oldpass:null,//旧密码
                 pass:null,//密码
                 checkPass:null,//确认密码
             },
            //错误提示信息
            rules: {
            pass: [{ validator: validatePass, trigger: "blur",}],
            checkPass: [{ validator: validatePass2, trigger: "blur" }],
            oldpass: [{ validator: checkAge, trigger: "blur",}],
           },
            //from表单组件默认左
           labelPosition: 'right',
        }
    },
    mounted() {
    },
    methods:{
         //返回 
        goBack() {
          this.$router.go(-1)
        },
        // 点击修改密码
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (this.ruleForm.oldpass!==null && this.ruleForm.pass!=null && valid) {
          //当密码修改成功时存储 我的账户用于判断是否显示修改成功提示信息
             sessionStorage.setItem("Promptforsuccess",this.Promptforsuccess)
             localStorage.setItem("imitatepassword",this.ruleForm.checkPass)
            this.$router.push("myaccount")
          } else {
           return false;
          }
        });
      },
    }
};
</script>
<style lang="less" scoped>
.passwordcommit{
    color: gray;
    font-size: 10px;
    line-height: 60px;
}
/deep/ .el-form-item__content {
    margin-bottom: 20px;
}
.myaccountfrom{
    /deep/ .el-form-item {
    margin-bottom: 22px;
    width: 707px;
    margin:0 auto;
    }
    /deep/ #securitycode{
        float: left;
        width: 307px;
    }
    #securitycodebox{
        float:left;
        margin-right:10px
    }
    .elbutton{
        float: left;
    }
    }
.verification{
    background-color: #ffffff;
    .verificationHead{
            height: 45px;
            line-height:120px;
            padding-bottom: 5px;
            width: 95%;
            border-bottom:1px solid #e9eef3;
            margin: 0 auto;
            .next{
                display: inline-block;
                float: right;border-radius:10px;line-height:50px ;
                /deep/ .elbutton{
                    height: 30px;
                    width: 110px;
                    line-height: 5px;
                }
            }
    }
}
/deep/ .el-page-header {
    line-height: 50px;
}
</style>    